<template>
  <footer class="footer">
    <!-- 波浪装饰 -->
    <div class="wave-decoration">
      <svg viewBox="0 0 1440 120" preserveAspectRatio="none">
        <path class="wave-path" d="M0,32L48,37.3C96,43,192,53,288,58.7C384,64,480,64,576,58.7C672,53,768,43,864,42.7C960,43,1056,53,1152,53.3C1248,53,1344,43,1392,37.3L1440,32L1440,120L1392,120C1344,120,1248,120,1152,120C1056,120,960,120,864,120C768,120,672,120,576,120C480,120,384,120,288,120C192,120,96,120,48,120L0,120Z"></path>
        <path class="wave-path" d="M0,64L48,69.3C96,75,192,85,288,80C384,75,480,53,576,48C672,43,768,53,864,58.7C960,64,1056,64,1152,58.7C1248,53,1344,43,1392,37.3L1440,32L1440,120L1392,120C1344,120,1248,120,1152,120C1056,120,960,120,864,120C768,120,672,120,576,120C480,120,384,120,288,120C192,120,96,120,48,120L0,120Z"></path>
      </svg>
    </div>

    <div class="container">
      <div class="footer-content">
        <div class="footer-section">
          <h3>关于网站</h3>
          <p>这是一个分享思想、倾诉心声的个人空间。在这里，你可以阅读博客文章，分享你的故事，或者参与有趣的互动。</p>
          <div class="social-links">
            <a href="#" class="social-link"><i class="fab fa-weixin"></i></a>
            <a href="#" class="social-link"><i class="fab fa-weibo"></i></a>
            <a href="#" class="social-link"><i class="fab fa-github"></i></a>
          </div>
        </div>

        <div class="footer-section">
          <h3>快速链接</h3>
          <ul class="footer-links">
            <li><router-link to="/">首页</router-link></li>
            <li><router-link to="/blog">博客</router-link></li>
            <li><router-link to="/treehole">树洞</router-link></li>
            <li><router-link to="/game">游戏</router-link></li>
            <li><router-link to="/about">关于</router-link></li>
            <li><router-link to="/contact">联系</router-link></li>
          </ul>
        </div>

        <div class="footer-section">
          <h3>博客分类</h3>
          <ul class="footer-links">
            <li><a href="#">生活随笔</a></li>
            <li><a href="#">技术分享</a></li>
            <li><a href="#">读书笔记</a></li>
            <li><a href="#">旅行见闻</a></li>
            <li><a href="#">美食记录</a></li>
          </ul>
        </div>

        <div class="footer-section">
          <h3>联系方式</h3>
          <ul class="contact-info">
            <li><i class="fas fa-envelope"></i> contact@example.com</li>
            <li><i class="fas fa-phone"></i> +86 123 4567 8900</li>
            <li><i class="fas fa-map-marker-alt"></i> 中国，北京</li>
          </ul>
        </div>

        <!-- 友情链接 Section -->
        <div class="footer-section">
          <h3>友情链接</h3>
          <ul class="friendly-links">
            <li><a href="https://etnor.xyz" target="_blank" rel="noopener noreferrer">ETNOR-API</a></li>
            <li><a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">百度</a></li>
            <li><a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">腾讯</a></li>
            <li><a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">阿里</a></li>
            <li><a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">字节</a></li>
            <li><a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">华为</a></li>
            <li><a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">小米</a></li>
            <li><a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">OPPO</a></li>
            <li><a href="https://www.baidu.com" target="_blank" rel="noopener noreferrer">VIVO</a></li>
            <!-- Add more friendly links here -->
            
          </ul>
        </div>
      </div>

      <div class="footer-bottom">
        <p>&copy; {{ currentYear }} 大成瑄辉. All rights reserved. <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">渝ICP备案2025060389421</a></p>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  name: 'TheFooter',
  computed: {
    currentYear() {
      return new Date().getFullYear()
    }
  }
}
</script>

<style scoped>
.footer {
  background: var(--card-bg);
  padding: 60px 0 20px;
  margin-top: 60px;
  position: relative;
}

.wave-decoration {
  position: absolute;
  top: -120px;
  left: 0;
  width: 100%;
  height: 120px;
  overflow: hidden;
}

.wave-decoration svg {
  width: 100%;
  height: 100%;
  display: block;
}

.wave-path {
  fill: var(--card-bg);
  opacity: 0.8;
  animation: waveFloat 8s ease-in-out infinite;
}

.wave-path:nth-child(2) {
  opacity: 0.6;
  animation-delay: -4s;
}

@keyframes waveFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  margin-bottom: 40px;
}

.footer-section h3 {
  color: var(--text-color);
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: 600;
}

.footer-section p {
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 20px;
}

.social-links {
  display: flex;
  gap: 15px;
}

.social-link {
  color: var(--text-color);
  font-size: 20px;
  transition: var(--transition);
}

.social-link:hover {
  color: var(--primary-color);
  transform: translateY(-3px);
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: var(--text-light);
  text-decoration: none;
  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--primary-color);
  padding-left: 5px;
}

.contact-info {
  list-style: none;
}

.contact-info li {
  color: var(--text-light);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.contact-info i {
  margin-right: 10px;
  color: var(--primary-color);
}

/* Friendly Links Styles */
.friendly-links {
  list-style: none;
  padding: 0;
  display: flex; /* Arrange links horizontally */
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  gap: 20px; /* Space between links */
}

.friendly-links li {
  margin-bottom: 0; /* Remove bottom margin from list items */
}

.friendly-links a {
  color: var(--text-light);
  text-decoration: none;
  transition: var(--transition);
}

.friendly-links a:hover {
  color: var(--primary-color);
  text-decoration: underline; /* Add underline on hover */
}

.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.footer-bottom p {
  color: var(--text-light);
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .footer {
    padding: 40px 0 20px;
  }
  
  .footer-content {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .footer-section {
    text-align: center;
  }
  
  .social-links {
    justify-content: center;
  }
  
  .contact-info li {
    justify-content: center;
  }
}
</style> 